<script>
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../config'
import { getSlot } from '../utils'
export default {
  props: {
    renderParams: {
      type: Object,
      default() {
        return {}
      }
    },
    renderOptions: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    active() {
      let active = false
      const { $table } = this.renderParams
      const { enabled = true } = this.renderOptions
      const { activeMethod, trigger, mode } = $table.editConfig

      if (enabled && trigger === 'single' && mode === 'cell' && activeMethod) {
        active = activeMethod(this.renderParams)
      }
      return active
    },
    disabled() {
      const { $table } = this.renderParams
      return !!$table.editStore.actived.row
    }
  },
  methods: {
    /** @param {Event} e */
    handleClick(e) {
      e.stopPropagation()
      const { row, column, $table } = this.renderParams
      if ($table.editStore.actived.row) return
      $table.setActiveCell(row, column)
    }
  },
  render(h) {
    const Bem = createBem(`${tableNamespace}__editable-edit`)
    const slot = getSlot(this)

    if (this.active === false) {
      return slot()
    }

    return (
      <div class={Bem()}>
        <div class={Bem('wrap')}>{slot()}</div>
        <i
          class={`${Bem('icon', { disabled: this.disabled })} el-icon-edit`}
          onClick={this.handleClick}
        />
      </div>
    )
  }
}
</script>

<style scoped lang="scss">
@import '../variables.scss';

.#{$TableNameSpace} {
  &__editable-edit {
    display: flex;
    position: relative;
    height: 24px;
    align-items: center;

    &__wrap {
      display: inline-block;
      flex-basis: calc(100% - 20px);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    &__icon {
      position: absolute;
      right: 0;
      cursor: pointer;
      flex-basis: 20px;
      &--disabled {
        cursor: not-allowed;
      }
    }
  }
}
</style>
